<template>
  <div>
    <cfg-table ref="table" :columns="columns" :data="data" :loading="loading" :config="config"
               :pageSizeOpts="pageSizeOpts" :pageNavigation="pageNavigation"
               :queryFormItem="queryFormItem" :collapseFormItem="collapseFormItem"
               @loadPage="loadPage"
               @handleCreate="handleCreate"
               @handleDetail="handleDetail"
               @handleEdit="handleEdit"
               @handleDelete="handleDelete"
               @handleDeleteMultiple="handleDeleteMultiple"
               @handleSearch="handleSearch"
               @handleReset="handleReset"
    ></cfg-table>
    <CfgStatisticsInstanceNewAddModal v-bind="addNewPanel" @submit="handleAddNewSubmit"></CfgStatisticsInstanceNewAddModal>
    <CfgStatisticsInstanceEditModal v-bind="editPanel" @submit="handleEditSubmit"></CfgStatisticsInstanceEditModal>
    <CfgStatisticsInstanceReadModal v-bind="readPanel"></CfgStatisticsInstanceReadModal>
  </div>

</template>

<script>

export default {
  name: "statisticsInstance",
  data(){
    return {
      modelCollectionObject:null,
      classObject:null,
      collectionObject:null,
      loading:false,
      addNewPanel:{
        width:1024,
        zIndex:100,
        titleStyle:{},
        drawer:{
          show:false
        }
      },
      editPanel:{
        width:1024,
        zIndex:100,
        titleStyle:{},
        drawer:{
          show:false
        },
        data:{}
      },
      readPanel:{
        width:1024,
        zIndex:100,
        titleStyle:{},
        drawer:{
          show:false
        },
        data:{}
      },
      config:{
        search:true,
        addButton:true,
        batchDeleteButton:true,
        downloadIcon:true,
        uploadIcon:true,
        uploadUrl:'/',
        tableSizeIcon:true,
        fullscreenIcon:true,
        refreshIcon:true,
        columnSettingIcon:true,
        action:true,
        additionalAction:false
      },
      pageSizeOpts:[10, 30, 50, 100],
      pageNavigation:{ total: 0, pageSize: 10, pageNumber: 1 }
    }
  },
  props:{

  },
  computed:{
    columns(){
      return [
        {
          key: 'type',
          title:{
            'zh-CN':'所属类型',
            'en-US':'type'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'className',
          title:{
            'zh-CN':'模型类名',
            'en-US':'class name'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'name',
          title:{
            'zh-CN':'名称',
            'en-US':'name'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'version',
          title:{
            'zh-CN':'版本号',
            'en-US':'version'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true,
        },
        {
          key: 'published',
          title:{
            'zh-CN':'是否发布',
            'en-US':'published'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true
        },
        {
          key: 'createTime',
          title:{
            'zh-CN':'创建时间',
            'en-US':'create time'
          }[this.G_Locale],
          minWidth: 60,
          align: 'center',
          show: true,
        },
        {
          key: 'updateTime',
          title:{
            'zh-CN':'更新时间',
            'en-US':'update time'
          }[this.G_Locale],
          minWidth: 100,
          align: 'center',
          show: true,
        },
      ]
    },
    queryFormItem(){
      return [
        {
          key: 'name',
          title:{
            'zh-CN':'名称',
            'en-US':'name'
          }[this.G_Locale],
          config: {
            type:'text'
          }
        },
        {
          key: 'className',
          title:{
            'zh-CN':'模型类名',
            'en-US':'class name'
          }[this.G_Locale],
          config: {
            type:'text'
          }
        },
      ]
    },
    collapseFormItem(){
      return [
        {
          key: 'type',
          title:{
            'zh-CN':'所属类型',
            'en-US':'type'
          }[this.G_Locale],
          config: {
            type:'text'
          }
        },
        {
          key: 'className',
          title:{
            'zh-CN':'模型类名',
            'en-US':'class name'
          }[this.G_Locale],
          config: {
            type:'text'
          }
        },
        {
          key: 'name',
          title:{
            'zh-CN':'名称',
            'en-US':'name'
          }[this.G_Locale],
          config: {
            type:'text'
          }
        },
      ]
    },
    additionalAction(){
      return []
    },
    data(){
      if(!!this.collectionObject){
        return this.collectionObject.records;
      }else{
        return [];
      }
    }
  },
  beforeMount() {
    this.collectionObject=this.$modelObject.create('statisticsCollection');
    this.classObject=this.$modelObject.create('statistics')
    this.loadPage(this.pageNavigation,null)
  },
  mounted() {

  },
  methods:{
    loadPage(pageNavigation,filter){
      let newFilter="";
      if(this.tools.isReal(filter)){
        newFilter=this.collectionObject.util.getFilter(filter);
      };
      this.loading=true;
      this.collectionObject.queryInfoByPage(pageNavigation.pageNumber,pageNavigation.pageSize,newFilter).then(flag=>{
        if(flag){
          this.pageNavigation.total=this.collectionObject.total;
          this.loading=false;
        }else{
          this.loading=false;
        }
      })
    },
    deleteRecord(ids){
      let _this=this;
      this.loading=true;
      return this.collectionObject.deleteByIds(ids).then(flag=>{
        if(flag){
          ids.forEach(id=>{
            let index=_this.collectionObject.records.findIndex(item=>item.id===id);
            if(index!==-1){
              _this.collectionObject.records.splice(index,1)
            }
          })
          this.loading=false;
          return true;
        }else{
          this.loading=false;
          return false;
        }
      })
    },
    getRecord(filter){
      let newFilter=this.collectionObject.util.getFilter(filter);
      return this.classObject.query(newFilter).then(flag=>{
        if(flag){
          return this.classObject.record;
        }else{
          return false;
        }
      })
    },
    handleSearch(filter){
      this.pageNavigation.pageNumber=1;
      this.loadPage(this.pageNavigation,filter)
    },
    handleReset(){
      this.pageNavigation.pageNumber=1;
      this.loadPage(this.pageNavigation,null)
    },
    handleCreate(){
      this.$set(this.addNewPanel.drawer,'show',true);
    },
    handleAddNewSubmit(data){
      this.loading=true;
      this.classObject.add(data).then(flag=>{
        if(flag){
          this.collectionObject.records.unshift(this.classObject.record);
          this.loading=false;
          this.$set(this.addNewPanel.drawer,'show',false);
        }else{
          this.loading=false;
        }
      })
    },
    async handleDetail(row,index){
      this.loading=true;
      this.readPanel.data=await this.getRecord({type:row.type,className:row.className});
      this.loading=true;
      if(this.tools.isReal(this.readPanel.data)){
        this.$set(this.readPanel.drawer,'show',true);
      }else{
        this.readPanel.data={};
      }
      this.loading=false;
    },
    async handleEdit(row,index){
      this.loading=true;
      this.editPanel.data=await this.getRecord({type:row.type,className:row.className});
      this.loading=true;
      if(this.tools.isReal(this.editPanel.data)){
        this.$set(this.editPanel.drawer,'show',true);
      }else{
        this.editPanel.data={};
      }
      this.loading=false;
    },
    handleEditSubmit(data){
      this.loading=true;
      this.classObject.setRecord(data);
      this.classObject.update().then(flag=>{
        if(flag){
          let index=this.collectionObject.records.findIndex(item=>item.id===this.classObject.record.id);
          if(index!==-1){
            this.collectionObject.records.splice(index,1,this.classObject.record)
          }
          this.loading=false;
          this.$set(this.editPanel.drawer,'show',false);
        }else{
          this.loading=false;
        }
      })
    },
    handleDelete(row,index){
      this.deleteRecord([row.id])
    },
    async handleDeleteMultiple(selection){
      let ids=[];
      selection.map(item=>ids.push(item.id));
      await this.deleteRecord(ids).then(flag=>{
        if(flag){
          this.$refs.table.selection=[];
        }
      });
    },
  }

}
</script>

<style scoped>

</style>
